<template>
  <div>
    <el-card>
      <el-table v-loading="loading" :data="skus">
        <el-table-column
          width="60px"
          label="序号"
          type="index"
        ></el-table-column>
        <el-table-column
          width="150px"
          label="名称"
          prop="skuName"
        ></el-table-column>
        <el-table-column label="描述" prop="skuDesc"></el-table-column>
        <el-table-column width="120px" label="默认图片">
          <template #="{ row }">
            <img :src="row.skuDefaultImg" style="width: 100px" />
          </template>
        </el-table-column>
        <el-table-column width="150px" label="价格（元）">
          <template #="{ row }">
            {{ row.price.toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column
          width="150px"
          label="价格（元）"
          prop="price"
        ></el-table-column>
        <el-table-column width="350px">
          <template #="{ row }">
            <el-button
              v-if="!row.isSale"
              type="info"
              icon="ele-Bottom"
              @click="onSaleHandler(row.id)"
            ></el-button>
            <el-button
              v-if="row.isSale"
              type="success"
              icon="ele-Top"
              @click="cancelSaleHandler(row.id)"
            ></el-button>
            <el-button
              type="primary"
              icon="ele-Edit"
              @click="editHandler(row.id)"
            ></el-button>
            <el-button
              type="info"
              icon="ele-InfoFilled"
              @click="showDetailHandler(row.id)"
            ></el-button>
            <el-popconfirm
              title="你确定要删除吗？"
              @confirm="deleteHandler(row.id)"
            >
              <template #reference>
                <el-button type="danger" icon="ele-Delete"></el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        style="margin-top: 20px"
        :total="total"
        :current-page="page"
        :page-size="limit"
        :page-sizes="[5, 10, 15, 20]"
        layout="prev,pager,next,jumper,->,sizes,total"
        @current-change="currentChangeHandler"
        @size-change="sizeChangeHandler"
      ></el-pagination>
    </el-card>

    <!-- 展示sku详情的组件 -->
    <el-drawer
      v-if="skuInfo"
      v-model="isShowDrawer"
      size="50%"
      :show-close="false"
    >
      <el-row>
        <!--
          span: 设置占据的格子数量（一行row满格数量是：24）
          我们还可以通过 xs,sm,md,lg,xl
          https://element-plus.gitee.io/zh-CN/component/layout.html#col-attributes
          来设置不同视口下当前 col 占据的 格子数
          offset: 设置当前col左侧偏移的格子数
          push: 设置当前col左侧的格子数
          pull: 设置当前col右侧的格子数
         -->
        <!-- <el-col :span="8" :push="3" style="text-align: right">名称</el-col>
        <el-col :span="12" :offset="1">啊实打实大</el-col> -->
        <el-col :span="4" class="col-left">名称：</el-col>
        <el-col :span="12" :offset="1">{{ skuInfo.skuName }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="4" class="col-left">描述：</el-col>
        <el-col :span="12" :offset="1">{{ skuInfo.skuDesc }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="4" class="col-left">价格：</el-col>
        <el-col :span="12" :offset="1">{{ skuInfo.price.toFixed(2) }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="4" class="col-left">平台属性：</el-col>
        <el-col :span="12" :offset="1">
          <el-tag
            style="margin: 0 10px 10px 0"
            v-for="item in skuInfo.skuAttrValueList"
            :key="item.id"
          >
            {{ item.attrName }} : {{ item.valueName }}
          </el-tag>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4" class="col-left">销售属性：</el-col>
        <el-col :span="12" :offset="1">
          <el-tag
            style="margin: 0 10px 10px 0"
            v-for="item in skuInfo.skuSaleAttrValueList"
            :key="item.id"
          >
            {{ item.saleAttrName }} : {{ item.saleAttrValueName }}
          </el-tag>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4" class="col-left">商品图片：</el-col>
        <el-col :span="18" :offset="1">
          <!-- 使用 el-carousel + el-carousel-item 来实现轮播图 -->
          <el-carousel>
            <el-carousel-item
              v-for="item in skuInfo.skuImageList"
              :key="item.id"
            >
              <img :src="item.imgUrl" />
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
    </el-drawer>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "ProductSKU",
});
</script>
<script lang="ts" setup>
import { computed, ref } from "vue";

import { ElMessage } from "element-plus";
import * as apis from "@/api/sku";
import type { ISKU, ISKUDetail } from "@/api/sku";

// 总条数
const total = ref(0);
// 每页显示条数
const limit = ref(10);
// 当前页
const page = ref(1);
// 数据列表
const skus = ref<ISKU[]>([]);
// sku列表加载的loading效果
const loading = ref(false);
// sku详情
const skuInfo = ref<ISKUDetail>();

// 抽屉的显示状态
const isShowDrawer = computed({
  get() {
    return !!skuInfo.value;
  },
  set() {
    skuInfo.value = undefined;
  },
});

async function getSKUs() {
  loading.value = true;
  try {
    const res = await apis.requestSKUListByPage(page.value, limit.value);
    total.value = res.total;
    skus.value = res.records;
  } catch (e) {
    ElMessage.error("sku列表获取失败");
  } finally {
    loading.value = false;
  }
}

function currentChangeHandler(v: number) {
  page.value = v;
  getSKUs();
}
function sizeChangeHandler(v: number) {
  limit.value = v;
  getSKUs();
}

//上架商品
async function onSaleHandler(id: number) {
  try {
    await apis.requestOnSale(id);
    ElMessage.success("商品上架成功");
    // 重新获取新的列表数据
    getSKUs();
  } catch (e) {
    ElMessage.error("商品上架失败");
  }
}

//下架商品
async function cancelSaleHandler(id: number) {
  try {
    await apis.requestCancelSale(id);
    ElMessage.success("商品下架成功");
    // 重新获取新的列表数据
    getSKUs();
  } catch (e) {
    ElMessage.error("商品下架失败");
  }
}

//编辑指定的商品
function editHandler(id: number) {
  ElMessage.success("功能正在开发中……");
}

//删除指定的商品
async function deleteHandler(id: number) {
  try {
    await apis.requestDelete(id);
    ElMessage.success("商品删除成功");
    // 重新获取新的列表数据
    getSKUs();
  } catch (e) {
    ElMessage.error("商品删除失败");
  }
}

// 查看sku的详情
async function showDetailHandler(id: number) {
  try {
    skuInfo.value = await apis.requestSKUById(id);
  } catch (e) {
    ElMessage.error("获取详情失败");
  }
}

getSKUs();
</script>

<style scoped>
.col-left {
  text-align: right;
  font-size: 20px;
  font-weight: 800;
}
.el-carousel {
  border: 1px solid red;
  padding: 5px;
}

.el-carousel__button {
  background-color: red;
}
</style>
